<script setup>
    import ContentCard from '../../../components/ContentCard.vue'
    import { getProjectFileClassify, getProjectFileList } from '@/api/project'
    import { onMounted } from 'vue'
    import { useStore } from 'vuex'
    import { useRouter } from 'vue-router'

    const store = useStore()
    const router = useRouter()

    onMounted(() => {
        getClassify()
        handleClickList()
    })

    // 左侧分类列表
    let classifyList = $ref({})
    let leftListLoading = $ref(false)
    const getClassify = () => {
        leftListLoading = true
        getProjectFileClassify({ projectId: store.state.project.projectArea.id }).then(res => {
            leftListLoading = false
            classifyList = res.result
        })
    }

    // 当前选中的文件类型id
    let currentTypeId = $ref(null)

    // 文件列表
    let fileList = $ref([])

    // 总条数
    let fileTotalCount = $ref(0)

    let params = $ref({
        pageNo: 1,
        pageSize: 10
    })

    // 点击类型列表 获取文件列表
    let dataLoading = $ref(false)
    const handleClickList = (id) => {
        currentTypeId = id
        params.projectId = store.state.project.projectArea.id
        params.fileTypeId = id
        
        dataLoading = true
        getProjectFileList(params).then(res => {
            dataLoading = false
            if(res.success){
                let { records, total } = res.result
                fileList = records
                fileTotalCount = total
            }
        })
    }

    // 文件预览
    const filePreview = (url) => {
        // window.open('https://view.officeapps.live.com/op/view.aspx?src=' + encodeURI(url))
        console.log(url)     
        if (!url) return;      
        let canOpenDirectList = ["txt", "pdf", "dwg"]
        let imageList = ["jpg", "jpeg", "png", "gif"]
        let canOpen = canOpenDirectList.some((item) => item == getSuffix(url))   
        let link = ''
        if (canOpen) {     
            link = router.resolve("/documents?url=" + encodeURI(url))     
        } else {       
            let isImage = imageList.some((item) => item == getSuffix(url))      
            if (isImage) {         
                link = router.resolve("/images?url=" + encodeURI(url))        
            } else {       
                link = router.resolve("/documents?url=https://view.officeapps.live.com/op/view.aspx?src=" + encodeURI(url) )
            }
        }

        window.open(link.href, '_blank')
    }
    
    const getSuffix = (t) => {
        let e=t.split("."),n=e[e.length-1]
        return n
    }
    

</script>

<template>
    <content-card back="list">
        <template #backText>
            <div class="text active">项目列表</div>
        </template>
        <template #currentTitle>
            &nbsp;&gt;&nbsp;<div class="text active">档案管理</div>
        </template>


        <div class="archives-wrap flex">
            <div class="left-list" v-loading="leftListLoading">
                <div class="top-text font-b" v-if="classifyList.allFile">
                    {{ classifyList.allFile.fileTypeName }}({{ classifyList.allFile.total }})
                </div>

                <el-scrollbar class="left-list-scrollbar">
                    <div 
                        class="group"
                        v-for="(item, index) in classifyList.list"
                        :key="index"
                        @click="item.show = !item.show"
                    >
                        <div class="group-name">
                            <div class="name">{{ item.fileTypeName }}({{ item.total }})</div>
                            <img src="../../../assets/images/arrow-icon.png" :class="{ unfold: item.show }">
                        </div>
    
                        <ul class="list-wrap" :class="{ unfold: item.show }">
                            <li 
                                v-for="(sub, subIndex) in item.children" 
                                :key="subIndex"
                                :class="{ active: sub.id == currentTypeId }"
                                @click.stop="handleClickList(sub.id)"
                            >
                                {{ sub.fileTypeName }} ({{ sub.total }})
                            </li>
                        </ul>
    
                    </div>
                </el-scrollbar>
            </div>

            <div class="file-list-wrap list-card-bg">
                <ul class="list-head flex-center">
                    <li class="projcet-index">序号</li>
                    <li class="project-name">文件名称</li>
                    <li class="project-type">文件类型</li>
                    <li class="project-remark">备注</li>
                    <li class="project-operate">操作</li>
                </ul>
                
                <el-scrollbar class="list-warp" v-loading="dataLoading">
                    <ul 
                        class="list-item flex-center" 
                        v-for="(item, index) in fileList" 
                        :key="index"
                    >
                        <li class="projcet-index">{{ index+1 }}</li>
                        <li class="project-name text_overflow">{{ item.projectId_dictText }}</li>
                        <li class="project-type text_overflow">{{ item.fileTypeId_dictText }}</li>
                        <li class="project-remark text_overflow">{{ item.remark }}</li>
                        <li class="project-operate">
                            <a href="javascript:;" class="mr20" @click="filePreview(item.fileUrl)">文件预览</a>
                            <a :href="item.fileUrl" target="__blank">文件下载</a>
                        </li>
                    </ul>
                </el-scrollbar>
            </div>

        </div>

    </content-card>
</template>

<style lang="less" scoped>
    .archives-wrap{
        margin: 0 50px 60px 50px;

        .left-list{
            width: 270px;
            height: 685px;
            border-right: 1px solid #183BAC;

            .top-text{
                color: var(--color-green);
                font-size: 18px;
                padding: 7px 0;
            }

            .left-list-scrollbar{
                height: 650px;
            }

            .group{
                padding-top: 15px;
                font-size: 14px;

                .group-name{
                    color: var(--color-green);
                    display: flex;
                    align-items: center;
                    cursor: pointer;

                    .name{
                        margin-right: 10px;
                    }

                    img{
                        width: 14px;
                        height: 14px;
                        transition: all .3s;
                        transform: rotate(270deg);

                        &.unfold{
                            transform: rotate(360deg);
                        }
                    }
                }

                .list-wrap{
                    height: 0;
                    overflow: hidden;

                    &.unfold{
                        height: auto;
                        padding-bottom: 10px;
                    }

                    li{
                        padding-top: 15px;
                        color: #fff;
                        cursor: pointer;

                        &:hover{
                            color: var(--color-green);
                        }

                        &.active{
                            color: var(--color-green);
                        }
                    }
                }
            }
        }

        .file-list-wrap{
            flex: 1;
            margin-left: 45px;
            padding: 20px;

            &.list-card-bg{
                padding: 20px;
                background: url('../../../assets/images/project-list-bg.png') center -33px no-repeat, url('../../../assets/images/project-list-top.png') top no-repeat,  url('../../../assets/images/project-list-bottom.png') bottom no-repeat;
                background-size: 100% 100%, 100%, 100%;
            }
            
            .projcet-index{
                width: 80px;
                text-align: center;
            }

            .project-name{
                width: 404px;
                margin-left: 36px;
            }

            .project-type{
                width: 150px;
                text-align: center;
                margin-left: 20px;
            }

            .project-remark{
                width: 160px;
                margin-left: 70px;
                flex-shrink: 30;
            }

            .project-operate{
                width: 200px;
                margin-left: 30px;
                text-align: center;
                flex-shrink: 30;
                display: flex;
                justify-content: space-around;

                a{
                    color: #fff;

                    &:hover{
                        color: #52CCFF;
                    }
                }
            }

            .list-head{
                font-size: 18px;
                color: #52CCFF;
                margin-bottom: 15px;
            }

            .list-warp{
                height: 600px;
                overflow-y: auto;

                .list-item{
                    color: #fff;
                    padding: 15px 0;
                    height: 46px;
                    cursor: pointer;
                    

                    &:hover{
                        background: url('../../../assets/images/list-item-bg.png') center no-repeat;
                        background-size: 103% 190%;
                    }
                }
            }
        }
    }
</style>